﻿<!--Pool Vue组件声明-->
<!--X-Tempalte 组件模板-->
<script type="text/x-template" id="pool-component-template">
    <div :class="{poolSelected:isSelected,pool:true,full:full}" v-on:click="poolClickHandler">
        <div class="time-interval">
           <span>{{startTime}}-{{endTime}} </span>
        </div>
        <div class="pool-progress">
               <div class="pool-progress-value" :style="'width:'+(current/maxCount*100)+'%'"></div>
               <div class="pool-progress-text">{{current}}/{{maxCount}}</div>
        </div>
    </div>
</script>
<script>
    var PoolComponent ={
        props:{
            id:{
               type:String,
               default:null
            },
            name:String,
            selectedId:{
               type:String,
               default:null
            },
            startTime:String,
            endTime:String,
            maxCount:Number,
            current:Number,
            allowOverFlow:Boolean,
            deviceId:String,
            date:Date,
            planPoolId:{
                type:String,
                default:null
            }
        },
        template:'#pool-component-template',// 模板
        data:function(){
            return{
                isSelected:false,
                virtualId:null,
                isFull:false
            };
        },
        watch:{    
            selectedId:function(value){
                var cvm = this;
                cvm.isSelected=(value && value ===cvm.virtualId) ;
            }
        },
        computed:{
            full:function(){
                const vm = this;
                return vm.current >= vm.maxCount
            }
        },
        methods:{
            poolClickHandler(){
                var cvm = this;
                if(!cvm.id){ // 选中号池不是当前号池
                    abp.ajax({
                           type:'post',
                           url:'/api/manual-appoint/create-pool',
                           data:JSON.stringify({
                                planPoolId:cvm.planPoolId,
                                deviceId:cvm.deviceId,
                                date:cvm.date
                           })   
                        }).then(res=>{
                            if(res.code==0){
                                cvm.virtualId=res.data.id;
                                cvm.$emit('click-pool',{id:cvm.virtualId,name:res.data.name});
                            }
                        })
                }else{  
                    if(cvm.selectedId !== cvm.id){
                        cvm.$emit('click-pool',{id:cvm.virtualId,name:cvm.name});
                    }
                }
            }
        },
        created(){
            var cvm = this;
            cvm.virtualId = cvm.id;
            cvm.isSelected= (cvm.selectedId && cvm.virtualId &&  cvm.selectedId===cvm.virtualId)
        }
    }
</script>
<style>
    /*正常状态*/
     .pool {
        border-radius: 5px;
        border: 1px solid #DCDFE6;
        height: 50px;
        width: 18%;
        display: flex;
        flex-direction: column;
        align-items:center;
        padding-top:5px;
    }

    .time-interval {
        width: 100%;
        height: 20px;
        flex: 0;
        text-align:center;
        font-size:12px;
    }

     .pool-progress {
        flex: 0;
        width: 70%;
        height: 15px;
        border: 1px solid #DCDFE6;
        position: relative;
        display:flex;
        flex-direction:row;
        justify-content:center;
        align-items:center;
        margin-top:4px;
    }

         .pool-progress .pool-progress-value {
            height: 100%;
            position:absolute;
            left:0;
            top:0;
            background-color: #909399;
        }

         .pool-progress .pool-progress-text {
           font-size:12px;
        }
    /*--end--*/


    /*--被选中--*/
     .poolSelected {
        border: 1px solid #409EFF !important;
        color: #409EFF;
    }

        .poolSelected .pool-progress {
            border-color: #409EFF !important;
        }
            /*进度条值*/
            .poolSelected .pool-progress .pool-progress-value {
                background-color: #409EFF !important;
            }
    /*----end---*/

    /*--达到最大值--*/
    .full{
        border-color: #E6A23C;
        opacity:0.6;
    }
</style>